<template>
<div class="center">
<p>page 文章内容</p>
<ul class='page-nav'>
<router-link to='/page' exact tag='li' event="mouseover"><a>page1</a></router-link>
<router-link to='/page/page2' tag='li' event="mouseover"><a>page2</a></router-link>
<router-link to='/page/page3' tag='li' event="mouseover"><a>page3</a></router-link>
<router-link to="/page#aaa" tag="li">hash定位</router-link>
<!--<li><router-link to='/page/page1'>page1</router-link></li>
<li><router-link to='/page/page2'>page2</router-link></li>
<li><router-link to='/page/page3'>page3</router-link></li>-->
</ul>
<router-view></router-view>
<p style="margin-top: 50px; font-size: 20px;">{{test}}</p>
<div id="aaa">使用hash定位到这里,相当于锚点</div>
</div>
</template>

<script>
export default{
    data(){
        return{
            test:"beforeRouteEnter测试数据"
        }
    },
    beforeCreate(){
        console.log("组件------beforeCreate")
    },
    beforeRouteEnter(to,from,next){
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不！能！获取组件实例 `this`
        // 因为当守卫执行前，组件实例还没被创建
        
        console.log("组件------beforeRouteEnter")
        // console.log(this)   //undefined   因这时beforeCreate还没有执行，组件还没有创建，所以this为undefined
        
        //可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
        next((mv)=>{
            // 通过 `vm` 访问组件实例
            //console.log(mv.test)
        })
    },
    //组件更新时执行
    beforeRouteUpdate(to,from,next){
        console.log("组件------beforeRouteUpdate");
        next()
    },
    beforeRouteLeave(to,from,next){
        console.log("组件------beforeRouteLeave");
        //这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
        next()
    }
}
</script>

<style>
.page-nav{padding: 20px 0; overflow: hidden; text-align: center; font-size: 20px;}
.page-nav li{display: inline-block; padding:20px;}
.page-nav li.is-active{ background-color:#cacaca;}
/*.page-nav li a{ padding: 0 20px;}*/
#aaa{ position: absolute; top:600px; text-align: center; width: 100%;}
</style>
